// import './header.js' //引入组件

class domConten extends HTMLElement {
  static get observedAttributes() {
    // 定义属性
    return ["color", "size", "status"];
  }

  constructor() {
    // 必须首先调用 super 方法
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 公共css样式
    const linkElem = document.createElement("link");
    linkElem.setAttribute("rel", "stylesheet");
    linkElem.setAttribute("href", "./css/style.css");
    const indexLink = document.createElement("link");
    indexLink.setAttribute("rel", "stylesheet");
    indexLink.setAttribute("href", "./index.css");
    shadowRoot.appendChild(indexLink);
    shadowRoot.appendChild(linkElem);
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(`
      .header {
        width: 100%;
        background: #3BA3FB;
      }
      .header .b_content {
          font-size: 18px;
          color: #fff;
      }
      .header .logo {
          width: 200px;
      }
      .header_r span {
          margin-left: 50px;
          cursor:pointer;
      }
      .header_r span.select{
        color:red;
      }
    `);
    shadowRoot.adoptedStyleSheets = [sheet];



    const headerDiv = document.createElement("div");
    headerDiv.setAttribute('class', 'header');
    shadowRoot.appendChild(headerDiv);

    const b_content = document.createElement("div");
    b_content.setAttribute('class', 'b_content flex_between flex_items');
    headerDiv.appendChild(b_content);

    const logo_img = document.createElement("img");
    logo_img.setAttribute('class', 'logo');
    logo_img.src = "./images/logo.png"
    b_content.appendChild(logo_img);

    const header_r = document.createElement("div");
    header_r.setAttribute('class', 'flex_center header_r');
    b_content.appendChild(header_r);

    let navArr = ['NEWS', 'COMPANY', 'DUST FORGE MEDICAL'];
    navArr.forEach((v, i) => {
      let header_r_span = document.createElement("span");
      header_r_span.setAttribute('index', i);
      header_r_span.innerText = v;
      header_r_span.onclick = function () {
        // 删除原选中class
        let header_r_select = header_r.getElementsByClassName("select");
        if (header_r_select && header_r_select.length > 0) header_r_select[0].classList.remove('select')
        // 添加点中class
        let index = this.getAttribute('index');
        this.classList.add("select");
      }
      header_r.appendChild(header_r_span);
    })


    // shadowRoot.innerHTML += this.template();
  }
  template() {
    return `
			<style>
      .header {
        width: 100%;
        background: #3BA3FB;
      }
      .header .b_content {
          font-size: 18px;
          color: #fff;
      }
      .header .logo {
          width: 200px;
      }
      .header_r span {
          margin-left: 50px;
          cursor:pointer;
      }
			</style>
			<div class="header">
          <div class="b_content flex_between flex_items">
              <img class="logo" src="./images/logo.png" alt="">
              <div class="flex_center header_r">
                  <span >NEWS</span>
                  <span>COMPANY</span>
                  <span>DUST FORGE MEDICAL</span>
              </div>
          </div>
      </div>

		`;
  }
  // 生命周期：首次被插入文档DOM时
  connectedCallback() {
    console.log("自定义元素添加至页面。");
  }
  // 生命周期：从文档DOM中删除时
  disconnectedCallback() {
    console.log("自定义元素从页面中移除。");
  }
  // 生命周期：被移动到新的文档时
  adoptedCallback() {
    console.log("自定义元素移动至新页面。");
  }

  // 生命周期：监听属性变化
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`属性 ${name} 已变更${newValue},原内容${oldValue}`);
  }
}
customElements.define('haeder-control', domConten);
